﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>消息中心</title>

    <!--common-->
    <link href="/resources/src/css/main.css" rel="stylesheet">
    <link href="/resources/src/css/responsive.css" rel="stylesheet">
    <link href="/resources/src/css/message.css" rel="stylesheet">
</head>
<body class="sticky-header" style="background-color: #f5f8f9;">
    
    <jsp:include page="left-slide.jsp" />
    <div class="main-content">
        <jsp:include page="header-start.jsp" />
        <div class="message">
            <div class="mcBar">
                <div class="mcBar_title"><b>消息中心</b></div>
                <div class="mcBar_list">
                    <a href="javasctipt:;" class="active">新建消息</a>
                    <a href="javasctipt:;">发出的消息</a>
                    <a href="javasctipt:;">收到的消息 <span class="newReceive">(1)</span></a>
                    <a href="javasctipt:;">垃圾箱</a>
                </div>
            </div>
            <div class="mcFun">
                <div class="mcFun_title"><b>新建消息</b></div>
                <div class="mcCompose">
                    <div class="inputLine clearfix">
                        <div class="labelTo"><span>*</span>接收者：</div>
                        <div class="contentFor addLine">
                            <div class="checkPerson">
                                <!-- <p><b>城西</b><i class="iconfont icon-shanchu"></i></p>
                                <p><b>城西</b><i class="iconfont icon-shanchu"></i></p>
                                <p><b>城西</b><i class="iconfont icon-shanchu"></i></p>
                                <p><b>城西</b><i class="iconfont icon-shanchu"></i></p>
                                <p><b>城西</b><i class="iconfont icon-shanchu"></i></p> -->
                            </div>
                            <!-- <div class="addPerson"><i class="iconfont icon-icon-xinjian"></i> 添加</div> -->
                            <div class="memberList">
                                <ul>
                                    <li class="tag" data-tag='{"id":"0","name":"城西"}' onclick="choose(this)">城西</li>
                                    <li class="tag" data-tag='{"id":"1","name":"城西1"}' onclick="choose(this)">城西1</li>
                                    <li class="tag" data-tag='{"id":"2","name":"城西2"}' onclick="choose(this)">城西2</li>
                                    <li class="tag" data-tag='{"id":"3","name":"城西3"}' onclick="choose(this)">城西3</li>
                                    <li class="tag" data-tag='{"id":"4","name":"城西4"}' onclick="choose(this)">城西4</li>
                                    <li class="tag" data-tag='{"id":"5","name":"城西5"}' onclick="choose(this)">城西5</li>
                                    <li class="tag" data-tag='{"id":"6","name":"城西6"}' onclick="choose(this)">城西6</li>                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="inputLine clearfix">
                        <div class="labelTo"><span>*</span>标题：</div>
                        <div class="contentFor">
                            <input type="text" placeholder="请输入">
                        </div>
                    </div>
                    <div class="inputLine clearfix">
                        <div class="labelTo"><span>*</span>内容：</div>
                        <div class="contentFor">
                            <textarea placeholder="请输入" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="sendRpw">
                        <button class="sendMC">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.0/jquery.nicescroll.js"></script>
    <script src="/resources/src/js/main.js"></script>    
    <script>        
        //设置mcBar的高度
        function setMcBarHeight(){
            $(".mcBar").height($(".sticky-left-side").innerHeight());
            $(window).resize(function(){
                $(".mcBar").height($(".sticky-left-side").innerHeight());
            });
        };        
        setMcBarHeight();

        $('.addLine').click(function(){
            $('.memberList').stop().show();
        });
        $(document).click(function(event){
            if(event.target.id!=$('.addLine').selector.substring(1)){
                $('.memberList').stop().hide();
            }
        });
        $('.addLine').click(function(e){
            e.stopPropagation();
        });
        function choose(obj){
            var $clickLi = $(obj);
            var _tag = $clickLi.data('tag');
            if($clickLi.hasClass('disable')){return false}
            $clickLi.addClass('disable');
            var _html = '<p><b data-id="'+_tag.id+'">'+_tag.name+'</b><i class="iconfont icon-shanchu" onclick="delTag(this)"></i></p>'
            $('.checkPerson').append(_html);
        }
        function delTag(obj){
            var $delObj = $(obj);
            var $delId = $delObj.siblings('b').data('id');
            $('.memberList li').each(function(){
                if($delId == $(this).data('tag').id){
                    $(this).removeClass('disable');
                }
            })
            $delObj.parent().remove();
        }        
    </script>
</body>
</html>